view {
    margin: 0px;
    padding: 0px;
}
#weather{
   position: fixed;
   z-index: 10;
   width: 100%;
   height: 100%;
  
   image{
     width: 100%;
    height: 100%;
   }
}
.bgType_act{
    opacity: 1;
}
.bgType_weat{
    opacity: 0.22;
}
page {
    
    height: 100%;
    position: relative;
    background: white;
}
#page{
    width:750rpx;
    height: 100%;
    overflow:hidden;
    position:relative;
} 
#top {
    width: 100%;
    height:94rpx;
    position: relative;
}
#position {
    text-align: center;
    line-height: 58rpx;
    height: 58rpx;
    width: 408rpx;
    background: #f7f7f7;
    padding: 2px 0px;
    color: #333;
    font-size: 32rpx;
    margin-left: 171rpx;
    top: 36rpx;
    border-radius: 32rpx;
    position: relative;
    label {
        display: block;
        width: 80%;
        margin-left: 10%;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
    
    }
}
#san_view {
    position:absolute;
    bottom: 0rpx;
    left:175rpx;
    border-radius: 200rpx;
    width: 400rpx;
    height: 400rpx;
    // background-image: -webkit-radial-gradient(center, rgba(255, 239, 0, 0.6) 10%, rgba(255, 250, 179, 0.1) 75%, rgba(255, 255, 255, 0) 85%);
    #scanView {
        border-radius: 50%;
        color: #231815;
        font-size: 56rpx;
        position: relative;
        .scan_icno_style {
            position: absolute;
            width: 77rpx;
            height: 66rpx;
            top: 66rpx;
            left: 111.5rpx;
        }
        span {
            width: 100%;
            text-align: center;
            position: absolute;
            display: block;
            top: 167rpx;
            font-size: 48rpx; // line-height: 2px;
        }
    }
}

#shopMarket {
    position: absolute;
    z-index: 99;
    width: 124rpx;
    height: 124rpx;
    bottom: 138rpx;
    right: 44rpx;
    color: #fff;
    image {
        width: 124rpx;
        height: 124rpx;
        z-index: 0;
    }
    label {
        display: inline-block;
        position: absolute;
        z-index: 9;
        left: 90rpx;
        top: 0px;
        line-height:36rpx;
        font-size:22rpx;
        width: 36rpx;
        height: 36rpx;
        text-align: center;
        background-color: #fc4e54;
        border-radius:50%;
    }
}
/***中间动画****/
#animation_view{
    margin-top:40rpx;
    position:relative;
    .animation_style{
     width:376rpx;
     height:472rpx;
     margin-left: 187rpx;
     
    }
    // .shelves{
    //     position:absolute;
    //     width:370.4rpx;
    //     height:195.2rpx;
    //     left:189.8rpx;
    //     top:0rpx;
    //     opacity:0;
    //     animation:mymove0 1s 1;
    //     animation-fill-mode:forwards;
    // }
    // .left_style{
    //     position:absolute;
    //     top: 60rpx;
    //     left:0rpx;
    //     width:153.6rpx;
    //     height:308.8rpx;
    //     opacity:0;
    //     // animation-duration:1s;
    //     // animation-iteration-count:1;
    //     // animation-delay:1s;
    //     animation:mymove1 1s 1;
    //     animation-fill-mode:forwards;
       
    // }
    //  .right_style{
    //     position:absolute;
    //     top: 162rpx;
    //     width:212.8rpx;
    //     height:332.8rpx;
    //     right:0rpx;
    //     opacity:0;
    //     animation-delay:1s;
    //     animation:mymove2 1.3s 1;
    //     animation-fill-mode:forwards;
    // }
    // .ercode_style{
    //     width:54rpx;
    //     height:18rpx;
    //     position:absolute;
    //     top: 236rpx;
    //     right:333rpx;
    //     opacity:0;
    //     animation:mymove4 0.3s 1;
    //     animation-delay:2.2s;
    //     animation-fill-mode:forwards;
    // }
    // line{
    //     position:absolute;
    //     opacity:0;
    //     top: 214rpx;
    //     right:327rpx;
    //     width: 65.6rpx;
    //     height:4rpx;
    //     background-color:#ffef00;
    //     animation:mymove 1.5s infinite linear;
    //     animation-delay:2.5s;
    //     // animation-direction:alternate;
    // }
    // .msg{
    //     font-size:28rpx;
    //     line-height:32rpx;
    //     color: #bbb;
    //     label{
    //         width:750rpx;
    //         position:absolute;
    //         display:block;
    //         text-align: center;
    //         top:450rpx;
            
    //     }
        
    // }
}
@keyframes mymove
{
   from {top:214rpx; opacity:1;}
   to {top:265rpx; opacity:1;}
}
@keyframes mymove0
{
   from {opacity:0;}
   to {opacity:1;}
}
@keyframes mymove1
{
   from {left:0rpx;opacity:0;}
   to {left:212.4rpx;opacity:1;}
}
@keyframes mymove2
{
   from {right:0rpx;opacity:0;}
   to {right:220rpx;opacity:1;}
}
@keyframes mymove4
{
   from {opacity:0;}
   to {opacity:1;}
}
/*****底部动画******/



#scanView1,
#scanView2 {
    position: absolute;
    top: 50rpx;
    left: 50rpx;
    height: 300rpx;
    width: 300rpx;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    position: absolute;
    z-index: 10;
    // animation-iteration-count: infinite;
    /*background: transparent;*/
}
#scanView{
    position: absolute;
    top: 50rpx;
    left: 50rpx;
    height: 300rpx;
    width: 300rpx;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    position: absolute;
    z-index: 10;
    background:-webkit-linear-gradient(#ffef00, #ffde00);
    .activity_style{
        position: absolute;
        height: 300rpx;
        width: 300rpx;
        top: 0px;
        left:0px;
        z-index: 666;

    }

}
#scanView2 {
    animation: sploosh 1s linear;
    animation-iteration-count: infinite;
    // animation-delay:0.4s;
}

#scanView1 {
    animation: sploosh2 1s linear;
    animation-iteration-count: infinite;
    // animation-delay:0.8s;
}

#scanView {
    // animation: sploosh3 1s linear;
    // animation-iteration-count: infinite;

     box-shadow: 0 0 50rpx #ffde00;
     background: rgba(255, 220, 1, 0.7);
}
@keyframes sploosh {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);
        background: rgba(255, 220, 1, 0.7);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(255, 220, 1, 0);
        background: rgba(255, 220, 1, 0);
    }
}

@keyframes sploosh2 {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);
        background: rgba(255, 220, 1, 0.7);
    }
    100% {
        box-shadow: 0 0 0 15px rgba(255, 220, 1, 0);
        background: rgba(255, 220, 1, 0.3);
    }
}
@keyframes sploosh3 {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);
        background: rgba(255, 220, 1, 0.7);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(255, 220, 1, 0);
        background: rgba(255, 220, 1, 1);
    }
}
